<template>
  <div>
    <!-- 表格 -->
    <div>
      <el-table :data="list" style="width: 100%">
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <!-- eslint-disable-next-line -->
            <l-pic :picurl="scope.row.avatar" :size="{width:40,height:40}" :disdel="false" :disview="false"/>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="团员名称" align="center"></el-table-column>
        <el-table-column prop="phone" label="团员手机号" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button class="action-button" type="text"
                       @click="cancel(scope.row.id)">撤销</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div style="text-align:right;margin:15px 15px">
      <el-pagination class="page"
        background
        layout="total, prev, pager, next, jumper"
        :total="count"
        :page-size="10"
        :current-page="page"
        @size-change="changePage"
        @current-change="changePage">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import LPic from '@/components/lPic'
import { getTuanLeagueMemberList, putTuanLeagueMember } from '@/api/customers'

export default {
  name: 'showWriteOff',
  components: {
    LPic
  },
  props: {
    tuanId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      page: 1,
      count: 1,
      list: [],
      selectGoods: [],
    }
  },
  mounted() {
    this.getTuanLeagueMemberList();
  },
  methods: {
    /**
     * 获取旗下团员列表
     */
    getTuanLeagueMemberList() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        page: this.page,
        limit: 10,
        id: this.tuanId,
        type: 1
      };
      getTuanLeagueMemberList(params).then(res => {
        if(res.status === 200){
          this.list = res.data;
          this.count = parseInt(res.count);
        }else if(res.status === 204){
          this.list = [];
          this.count = 1;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 撤销
     */
    cancel(data) {
      this.$confirm('是否通过该审核?','提示',{
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        const params = {
          key: this.$store.state.app.activeApp.saa_key,
          id: [data],
          is_verify: 0
        };
        putTuanLeagueMember(params).then(response => {
          if(response.status === 200){
            this.$message.success('撤销成功');
            this.$emit('success');
          }else{
            this.$message.error(response.message);
          }
        })
      }).catch(() => {
        //取消
      })
    },
    /**
     * 翻页
     */
    changePage(page) {
      this.page = page;
      this.getTuanLeagueMemberList();
    },
  },
}
</script>